<template>
<!-- 头部开始  data.user.avatar  -->
  <div style="height: 60px; background-color: blue; display: flex; align-items: center">
      <div style="width: 200px; display: flex; align-items: center;">
        <img style="width: 40px" src="@/assets/咖啡.png" alt="">
        <span style=" font-size: 24px; color: white; margin-left: 5px">后台管理系统</span>
      </div>
    <div style="flex: 1"></div>
    <div style="width: 150px; display: flex; align-items: center">
      <img :src="data.user.avatar || upload " alt="" style="width: 40px; height: 40px; border-radius: 50%" >
      <span style="color: white; margin-left: 5px">{{ data.user.name}}</span>
    </div>
  </div>
<!-- 头部结束 -->

<!-- 菜单 -->
  <div style="display: flex ">
<!--  左侧导航菜单开始
router开启路由管理,不然不能跳转页面  :default-active="router.currentRoute.value.path"右侧是什么内容，左侧导航栏就是那个高亮
:default-openeds="['1']" 下拉默认打开     -->
    <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
      <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          系统首页
        </el-menu-item>

        <el-menu-item index="/manager/data">
          <el-icon><DataAnalysis /></el-icon>
          数据统计
        </el-menu-item>

        <el-sub-menu index="1">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/employee">员工信息</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/manager/person">
          <el-icon><UserFilled /></el-icon>
          个人信息
        </el-menu-item>

        <el-menu-item index="/manager/password">
          <el-icon><Lock /></el-icon>
          修改密码
        </el-menu-item>

        <el-menu-item @click="logout">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-menu-item>

      </el-menu>
    </div>
<!--  左侧导航菜单结束  -->

<!--右侧菜单开始-->
    <div style="flex: 1; width: 0; background-color: #c8fcff; padding: 10px">
      <RouterView @updateUser="updateUser"/>
    </div>
<!--右侧菜单结束-->


  </div>


</template>


<script setup>

import {DataAnalysis, House, Lock, SwitchButton, User, UserFilled} from "@element-plus/icons-vue";
import router from "@/router/index.js";


import {reactive} from "vue";
import Login from "@/views/Login.vue";

const upload = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user'))
})

const updateUser = () =>{
  data.user = JSON.parse(localStorage.getItem('xm-pro-user'))
}

const logout = () =>{
  localStorage.removeItem('xm-pro-user')  //清除当前登录的用户数据
  location.href = '/login'  //推出登陆页面
}

</script>

<style>
.el-menu .is-active{
  background-color: #c8fcff !important;
}
</style>











